<template>
  <div class="index-well-content">
    <div
      v-for="item in data"
      :key="item.id"
      class="well-item"
      @tap="onSelect(item.id)"
    >
      <div :class="[item.banner && 'has-banner']" class="well-item__info">
        <div class="well-item__info-detail">
          <div class="well-item__info-detail-title">{{ item.name }}</div>
          <div class="well-item__info-tags">
            <span v-for="ca in item.categories" :key="ca.id">
              {{ ca.name }}
            </span>
          </div>
        </div>
        <div class="well-item__info-collect">
          <div class="author-item">{{ item.author }}</div>
          <div class="look-item">
            <ViewLabel :count="item.viewCount" />
          </div>
        </div>
      </div>
      <div v-if="item.banner" class="banner-wrapped">
        <image :src="item.banner" mode="widthFix" class="well-item__banner" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ViewLabel from "@/components/view-label.vue";

withDefaults(
  defineProps<{
    data: any;
  }>(),
  {
    data: () => ({}),
  }
);

const emits = defineEmits(["select"]);

const onSelect = (id: string) => {
  emits("select", id);
};
</script>

<style lang="less">
.index-well-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  .well-item {
    width: 100%;
    background-color: white;
    border-radius: 20px;
    padding: 26px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    box-shadow: 0 0 4px 0 rgba(125, 125, 125, 0.1);
    &__info {
      width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      &.has-banner {
        height: 194px;
      }

      &-detail {
        font-weight: 500;
        font-size: 28px;
        color: #000000;
        line-height: 40px;
        &-title {
          text-overflow: ellipsis;
          overflow: hidden;
          line-clamp: 2;
          -webkit-line-clamp: 2;
        }
      }
      &-tags {
        margin-top: 8px;
        display: flex;
        align-items: center;
        gap: 4px;
        span {
          background-color: #7ed6c6;
          border-radius: 8px;
          padding: 2px 10px;
          box-sizing: border-box;

          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
          line-height: 34px;
        }
      }
      &-collect {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
        font-weight: 400;
        font-size: 24px;
        color: #8b8b8b;
        .author-item {
          width: 0;
          flex: 1;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
    .banner-wrapped {
      width: 252px;
      height: 194px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &__banner {
      height: 194px;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      margin: 0 auto;
    }
  }
}
</style>
